<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS3 工具栏</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        text-decoration: none;
    }

    body {
        font-family: Consolas, serif;
        overflow: hidden;
    }

    .tools-bar {
        width: 30px;
        height: 100vh;
        background-color: black;
        opacity: 0;
        position: fixed;
        top: 0;
        right: -28px;
        text-align: center;
        line-height: 100vh;
        transition: all .5s;

    }

    .tools-bar span {
        color: white;
    }

    .tools-bar:hover {
        opacity: 0.5;
        right: 0;
    }
    [type=checkbox]{
        display: none;
    }
    [type=checkbox]:checked ~ .aside-nav{
        right: 0;
    }
    [type=checkbox]:checked ~ .mask div{
        width: 350vh;
        height: 300vh;
        opacity: 0.5;
    }
    .aside-nav {
        width: 300px;
        height: 100vh;
        position: fixed;
        top: 0;
        right: -350px;
        box-shadow: 0 0 20px #666, 0 0 20px #666;
        background-color: #F9F9F9;
        overflow-y: scroll;
        transition: all .5s;
    }
    .aside-nav::-webkit-scrollbar{
        width: 7px;
    }
    .aside-nav::-webkit-scrollbar-thumb{
        background-color: #666;
    }
    .aside-nav::-webkit-scrollbar-track{
        background-color: #ddd;
    }

    .aside-nav .aside-nav-header {
        width: 100%;
        height: 60px;
        background-color: #903CFC;
        position: relative;
    }

    .aside-nav .aside-nav-header div {
        float: left;
        width: 50%;
        color: white;
        line-height: 60px;
    }

    .aside-nav .aside-nav-header .nav-header-title {
        text-indent: 0.7em;
    }

    .aside-nav .aside-nav-header .nav-header-icon {
        padding-right: 0.7em;
        text-align: right;
    }

    .aside-nav-body {
        width: 100%;
        height: 1000px;
    }
    .aside-nav-body ul.nav-body-list{
        list-style: none;
        width: 100%;
        height: auto;
    }
    .aside-nav-body ul.nav-body-list li{
        width: 100%;
        height: auto;
        line-height: 40px;
        text-indent: 0.7em;
    }
    .aside-nav-body ul.nav-body-list li:hover{
        background-color: #f0f0f0;
    }
    .aside-nav-body ul.nav-body-list li a{
        color: #666;
        font-weight: bold;
    }
    .aside-nav-body ul.nav-body-list li a span{
        margin-right: 10px;
        vertical-align: middle;
    }
    .aside-nav-body ul.nav-body-list li ul.child{
        background-color: #F9F9F9;
    }
    .aside-nav-body ul.nav-body-list li ul.child li{
      text-indent: 1.4em;
    }
    .aside-nav-body ul.nav-body-list li ul.child li a{
        font-weight: 100;
    }
    .aside-nav-body ul.nav-body-list li ul.child li span{
        margin-right: 5px;
    }
    ul.child li:hover{
        background-color: #f7f7f7;
    }
    .mask div{
        width: 0;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background-color: black;
        opacity: 0;
        transition: all .5s;
        transform: skewY(45deg);
    }
    img{
        width: 100vw;
        height: 100vh;
    }
</style>
<body>
<div>
  <img src="../img/1.jpeg" alt="">
</div>
<div class="tools-bar">
  <label for="check">
    <span class="fa fa-tags"></span>
  </label>
</div>
<!--input 需要写在元素前面，因为css 只能获取目标元素之后的元素-->
<input type="checkbox" name="" id="check">
<label for="check" class="mask">
  <div></div>
</label>
<div class="aside-nav">
  <div class="aside-nav-header">
    <div class="nav-header-title">
      Header
    </div>
    <div class="nav-header-icon">
      <span class="fa fa-icons"></span>
    </div>
  </div>
  <div class="aside-nav-body">
    <ul class="nav-body-list">
      <li>
        <a href="">
          <span class="fa fa-file"></span>
          书签
        </a>
        <ul class="nav-body-list child">
          <li>
            <a href="">
              <span class="fa fa-file"></span>
              书签1
            </a>
          </li>
          <li>
            <a href="">
              <span class="fa fa-file"></span>
              书签2
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href="">
          <span class="fa fa-file"></span>
          书签abc
        </a>
      </li>
    </ul>
  </div>
</div>
</body>
</html>